﻿
@{
    ViewBag.Title = "德器物联";
    Layout = "~/Views/Shared/_MyLayoutPage.cshtml";

    int SumNum = ViewBag.SumNum;
    int OnLineNum = ViewBag.OnLineNum;
    int OffLineNum = SumNum - OnLineNum;
    int ExcessNum = ViewBag.ExcessNum;

    double OnLineP = Convert.ToDouble(OnLineNum) / Convert.ToDouble(SumNum) * 100;
    double OffLineP = Convert.ToDouble(OffLineNum) / Convert.ToDouble(SumNum) * 100.0;
    double ExcessP = Convert.ToDouble(ExcessNum) / Convert.ToDouble(SumNum) * 100.0;

}
@section head{
    <link rel="stylesheet" href="~/Content/DataView/BigData.css" />
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=kSoIGIUPtwLnFbxKLyZfxKYa77SQpoXO"></script>
    <script src="~/Scripts/echarts.common.min.js"></script>
    <script src="~/Scripts/gundo.js"></script>
    <style type="text/css">
        html, body, div, span, applet, object, iframe,
        h1, h2, h3, h4, h5, h6, p, blockquote, pre,
        a, abbr, acronym, address, big, cite, code,
        del, dfn, em, img, ins, kbd, q, s, samp,
        small, strike, strong, sub, sup, tt, var,
        b, u, i, center,
        dl, dt, dd, ol, ul, li,
        fieldset, form, label, legend,
        table, caption, tbody, tfoot, thead, tr, th, td,
        article, aside, canvas, details, embed,
        figure, figcaption, footer, header, hgroup,
        menu, nav, output, ruby, section, summary,
        time, mark, audio, video {
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 100%;
            font: inherit;
            vertical-align: baseline;
        }
        /* HTML5 display-role reset for older browsers */
        article, aside, details, figcaption, figure,
        footer, header, hgroup, menu, nav, section {
            display: block;
        }

        body {
            line-height: 1;
        }

        ol, ul {
            list-style: none;
        }

        blockquote, q {
            quotes: none;
        }

            blockquote:before, blockquote:after,
            q:before, q:after {
                content: '';
                content: none;
            }

        table {
            border-collapse: collapse;
            border-spacing: 0;
        }
        .bottomList{
            height:120px;
            overflow:hidden;
        }
        .bottomList ul li{
	        width:100%;
	        height:39px;
	        line-height:39px;
	        overflow:hidden;
        }
        .bottomList ul li:hover{
	        background:#2558b1;
        }
        .bottomList ul li div{
	        width:10.5%;
	        height:39px;
	        text-align:center;
	        float:left;
	        overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
        }
    </style>
}

<div class="head">
    大数据平台
</div>
<div class="content">
    @*左边部分*@
    <div class="content_l">
        @*左边地图*@
        <div class="content_l_t1">
            <div style="width:100%;height:100%;position:relative;margin-top:10px;">
                <div style="width:100%;height:100%;position:relative" id="mapDetail">
                </div>
                <img style="position:absolute;left:0;bottom:0;width:80px;height:110px;" src="~/Content/Img/icon_lb.png" />
            </div>
        </div>
        <div class="content_l_t2">
            <div class="content_Ranking" style="height:100%">
                @*<div class="title_r">24小时数据排行</div>
                <div style="height:260px;" id="main4"></div>*@
                <div id="main4" style="width: 100%;height:100%;"></div>
            </div>
            <div class="content_History" style="height:100%">
                @*<div class="title_r">历史走势图</div>
                <div style="height:260px;" id="main3"></div>*@
                <div id="main3" style="width: 100%;height:100%;"></div>

            </div>
        </div>
    </div>
    @*右边部分*@
    <div class="content_r" style="height:720px;width: 39.6%;">
        <div class="start_charts">
            <div class="state">
                <div class="title_r">德器物联</div>

            </div>

            <div class="state">
                <div class="f_l">NO.1 &nbsp; 在线设备</div>
                <div class="f_l red_line"><div class="stateone" style="width: @OnLineP%;"></div></div>
                <div class="f_l" id="state1">@OnLineNum/@SumNum</div>

            </div>
            <div class="state">
                <div class="f_l">NO.2 &nbsp; 离线设备</div>
                <div class="f_l red_line"><div class="statetwo" style="width: @OffLineP%;"></div></div>
                <div class="f_l" id="state2">@OffLineNum/@SumNum</div>
                <div class="clear"></div>
            </div>

            <div class="state">
                <div class="f_l">NO.3 &nbsp; 超标设备</div>
                <div class="f_l red_line"><div class="overhaul_s" style="width: @ExcessP%;"></div></div>
                <div class="f_l" id="overhaul">@ExcessNum/@SumNum</div>
                <div class="clear"></div>
            </div>
        </div>

        <div class="install" style="height:500px;">
            <div class="title_r">排放总量统计图</div>
            <div style="position:relative;width:100%;height:100%;">
                <div id="main" style="width:100%;height:100%;"></div>
                @*<div style="width:50%;">
                    <div class="install_l" style="text-align:center;">设备安装</div>
                    <div class="install_l" id="main1">
                    </div>
                </div>

                <div style="width:50%;">
                    <div class="install_r" style="text-align:center;">监控安装</div>
                    <div class="install_r" id="main2">

                    </div>
                </div>*@

            </div>

        </div>
        @*<div class="Newest">
            <div class="title_r">新加入商家</div>

        </div>*@
    </div>
    <div class="Reminder" style="margin-top: 10px;width:100%">
        <div class="nav_title">
            <ul>
                <li>设备编号</li>
                <li>店铺名称</li>
                <li>店铺地址</li>
                <li>油烟浓度</li>
                <li>颗粒物浓度</li>
                <li>非甲烷总烃浓度</li>
                <li>设备状态</li>
                <li>风机电流</li>
                <li>净化器电流</li>
            </ul>
        </div>
        <div id="bottomList" class="bottomList">
            <ul>
                @for (int i = 0; i < ViewBag.DeviceData.Count; i++)
                {
                <li>
                    <div>@ViewBag.DeviceData[i]["DeviceId"]</div>
                    <div>@ViewBag.DeviceData[i]["Name"]</div>
                    <div>@ViewBag.DeviceData[i]["Address"]</div>
                    <div>@ViewBag.DeviceData[i]["Y1"]|@ViewBag.DeviceData[i]["Y2"] (mg/m³)</div>
                    <div>@ViewBag.DeviceData[i]["V1"]|@ViewBag.DeviceData[i]["V2"] (mg/m³)</div>
                    <div>@ViewBag.DeviceData[i]["K1"]|@ViewBag.DeviceData[i]["K2"] (mg/m³)</div>
                    @if (ViewBag.DeviceData[i]["LastTime"].ToString() != "" && DateTime.Parse(ViewBag.DeviceData[i]["LastTime"]) > DateTime.Now.AddHours(-1))
                    {
                        <div style="color:green">在线</div>
                        <div>@ViewBag.DeviceData[i]["amp1"] A</div>
                        <div>@ViewBag.DeviceData[i]["amp2"] A</div>
                    }
                    else
                    {
                        <div style="color:gray">离线</div>
                        <div>——</div>
                        <div>——</div>
                    }

                </li>
                }
                @for (int i = 0; i < ViewBag.DeviceData.Count; i++)
                {
                <li>
                    <div>@ViewBag.DeviceData[i]["DeviceId"]</div>
                    <div>@ViewBag.DeviceData[i]["Name"]</div>
                    <div>@ViewBag.DeviceData[i]["Address"]</div>
                    <div>@ViewBag.DeviceData[i]["Y1"]|@ViewBag.DeviceData[i]["Y2"] (mg/m³)</div>
                    <div>@ViewBag.DeviceData[i]["V1"]|@ViewBag.DeviceData[i]["V2"] (mg/m³)</div>
                    <div>@ViewBag.DeviceData[i]["K1"]|@ViewBag.DeviceData[i]["K2"] (mg/m³)</div>
                    @if (ViewBag.DeviceData[i]["LastTime"].ToString() != "" && DateTime.Parse(ViewBag.DeviceData[i]["LastTime"]) > DateTime.Now.AddHours(-1))
                    {
                        <div style="color:green">在线</div>
                        <div>@ViewBag.DeviceData[i]["amp1"] A</div>
                        <div>@ViewBag.DeviceData[i]["amp2"] A</div>
                    }
                    else
                    {
                        <div style="color:gray">离线</div>
                        <div>——</div>
                        <div>——</div>
                    }

                </li>
                }


                @*<li>店铺1</li>
        <li>重庆九龙坡区</li>
        <li>30</li>
        <li>20</li>
        <li>10</li>
        <li>正常</li>
        <li>无</li>*@
            </ul>
            @*<ul>
                <li>002</li>
                <li>店铺2</li>
                <li>重庆渝中区</li>
                <li>30</li>
                <li>20</li>
                <li>10</li>
                <li>正常</li>
                <li>无</li>
            </ul>*@

            @*<div class="clear"></div>*@
        </div>
    </div>

</div>
<div style="font-size:12px;margin-top:10px;margin-bottom:10px;margin-left:15px;width:100%;text-align: center;">
    ©2020 德器(重庆)科技有限公司|DEQI(CQ) TECHNOLOGY.CO.,LTD 服务热线 400-9019-505
</div>

<script type="text/javascript">
    var SUMData = [];
    var AvgData = [];
    var AvgData2 = [];  //通道2
    var Op4_X = [];
    var Op4_Y = [];
    var Op3_X = [];
    var Op3_Y = [];
    var Op2_X = [];         //颗粒物
    var Op2_Y = [];         //颗粒物

    var myChart;
    var option;
    window.onload = function () {
        $.ajaxSettings.async = false;
        $.post("/Panel/GetBlowOffSUM", function (msg) {

            console.log(msg);
            //首先格式化归零数据
            for (var i = 0; i < msg.length; i++) {
                if (msg[i].Y == null || msg[i].V == null || msg[i].K == null) {
                    msg[i].Y = 0;
                    msg[i].V = 0;
                    msg[i].K = 0;
                }
            };
            SUMData = [];
            for (var i = 0; i < msg.length; i++) {
                var tempItem = { product: msg[i].DateHour, '油烟浓度': msg[i].Y, '非甲烷总烃': msg[i].V, '颗粒物': msg[i].K };
                SUMData.push(tempItem);
            }

        });

        $.post("/Panel/GetBlowOffAvg", function (msg) {
            console.log(msg);
            //首先格式化归零数据
            for (var i = 0; i < msg.length; i++) {
                if (msg[i].Y1 == null || msg[i].V1 == null || msg[i].K1 == null || msg[i].Y2 == null || msg[i].V2 == null || msg[i].K2 == null) {
                    msg[i].Y1 = 0;
                    msg[i].V1 = 0;
                    msg[i].K1 = 0;
                    msg[i].Y2 = 0;
                    msg[i].V2 = 0;
                    msg[i].K2 = 0;
                }
            };

            //AvgData = [];
            for (var i = 0; i < msg.length; i++) {
                //var tempItem = { product: msg[i].DateHour, '油烟浓度': msg[i].Y1, 'VOC': msg[i].V1, '颗粒物': msg[i].K1 };
                //AvgData.push(tempItem);

                Op4_X.push(msg[i].DateHour);
                Op4_Y.push(((msg[i].Y1 + msg[i].Y2) / 2).toFixed(2));
                Op3_X.push(msg[i].DateHour);
                Op3_Y.push(((msg[i].V1 + msg[i].V2) / 2).toFixed(2));

                Op2_X.push(msg[i].DateHour);
                Op2_Y.push(((msg[i].K1 + msg[i].K2) / 2).toFixed(2));
            }

            //AvgData2 = [];
            //for (var i = 0; i < msg.length; i++) {
            //    var tempItem = { product: msg[i].DateHour, '油烟浓度': msg[i].Y2, 'VOC': msg[i].V2, '颗粒物': msg[i].K2 };
            //    AvgData2.push(tempItem);
            //}
        });

        $.ajaxSettings.async = true;


        var option4 = {
            title: {
                text: "最近24小时油烟浓度趋势",
                textStyle: {//标题内容的样式
                    fontStyle: 'normal',//主标题文字字体风格，默认normal，有italic(斜体),oblique(斜体)
                    fontWeight: "normal",//可选normal(正常)，bold(加粗)，bolder(加粗)，lighter(变细)，100|200|300|400|500...
                    fontFamily: "san-serif",//主题文字字体，默认微软雅黑
                    fontSize: 18,//主题文字字体大小，默认为18px
                    color: 'white'
                },
                left: 'center',
                top: '20px',

            },
            xAxis: {
                type: 'category',
                data: Op4_X,
                axisLine: {
                    lineStyle: {
                        color: 'white' //更改坐标轴颜色
                    }
                },
                name:'h'
            },
            yAxis: {
                type: 'value',
                axisLine: {
                    lineStyle: {
                        color: 'white' //更改坐标轴颜色
                    }
                },
                name: '(mg/m³)',
                max:1
            },
            series: [{
                data: Op4_Y,
                type: 'line'
            }],
            grid: {
                top: "50px",
                left: "40px",
                right: "20px",
                bottom: "20px"
            }

        };

        var option3 = {
            title: {
                text: "最近24小时非甲烷总烃趋势",
                textStyle: {//标题内容的样式
                    fontStyle: 'normal',//主标题文字字体风格，默认normal，有italic(斜体),oblique(斜体)
                    fontWeight: "normal",//可选normal(正常)，bold(加粗)，bolder(加粗)，lighter(变细)，100|200|300|400|500...
                    fontFamily: "san-serif",//主题文字字体，默认微软雅黑
                    fontSize: 18,//主题文字字体大小，默认为18px
                    color: 'white'
                },
                left: 'center',
                top: '20px',

            },
            xAxis: {
                type: 'category',
                data: Op3_X,
                axisLine: {
                    lineStyle: {
                        color: 'white' //更改坐标轴颜色
                    }
                },
                name: 'h'
            },
            yAxis: {
                type: 'value',
                axisLine: {
                    lineStyle: {
                        color: 'white' //更改坐标轴颜色
                    }
                },
                name: '(mg/m³)',
                max:15
            },
            series: [{
                data: Op3_Y,
                type: 'line'
            }],
            grid: {
                top: "50px",
                left: "40px",
                right: "20px",
                bottom: "20px"
            }

        };

        initCharts();
        initMap();
        var myChart4 = echarts.init(document.getElementById('main4'));
        myChart4.setOption(option4, true);
        var myChart3 = echarts.init(document.getElementById('main3'));
        myChart3.setOption(option3, true);

        gundo();

    }


</script>


@*地图初始化*@
<script type="text/javascript">

    var now1 = new Date();
    var map;
    now1.setHours(now1.getHours() - 1);
    var DeviceListJson = JSON.parse('@Html.Raw(ViewBag.DeviceDataJson)');
    var DeviceListArray = [];

    var opts1 = {
        width: 220,     // 信息窗口宽度
        height: 120,     // 信息窗口高度
        title: "设备信息", // 信息窗口标题
        enableMessage: true//设置允许信息窗发送短息
    };
    var opts2 = {
        width: 220,     // 信息窗口宽度
        height: 220,     // 信息窗口高度
        title: "设备信息", // 信息窗口标题
        enableMessage: true//设置允许信息窗发送短息
    };

    function initMap() {
        // 百度地图API功能
        map = new BMap.Map("mapDetail");
        var IconGray = new BMap.Icon("/Content/Img/icon_1.png", new BMap.Size(32, 32)); //第二个参数为图标大小
        var IconGreen = new BMap.Icon("/Content/Img/icon_2.png", new BMap.Size(32, 32));
        var IconRed = new BMap.Icon("/Content/Img/icon_3.png", new BMap.Size(32, 32));


        var point = new BMap.Point(106.302201, 29.403473);
        map.centerAndZoom(point, 11);
        map.enableScrollWheelZoom();
        map.setMapStyleV2({
            styleId: '116436b35bdb4c1508eea8a5552d0ae2'
        });

        for (var i = 0; i < DeviceListJson.length; i++) {
            DeviceListArray.push(DeviceListJson[i].DeviceId);
            //这里需要查找其他相似的数组
            for (var j = i + 1; j < DeviceListJson.length; j++) {
                if (DeviceListJson[j].lon == DeviceListJson[i].lon && DeviceListJson[j].lat == DeviceListJson[i].lat) {
                    //表明找到相等的,把这个弄进来
                    DeviceListArray.push(DeviceListJson[j].DeviceId);
                    //然后需要在原数组内删除掉弄进来的这个元素
                    DeviceListJson.splice(j, 1);
                }
            }

            point = new BMap.Point(DeviceListJson[i].lon, DeviceListJson[i].lat);
            var marker;
            var LastTime = new Date(Date.parse(DeviceListJson[i].LastTime))
            if (LastTime > now1) {
                marker = new BMap.Marker(point, { icon: IconGreen });
            }
            else {
                marker = new BMap.Marker(point, { icon: IconGray });
            }

            var InfoContent = "<p>设备名称：" + DeviceListJson[i].Name + "</p>";
            InfoContent += "<p>地址：" + DeviceListJson[i].Address + "</p>";
            if (DeviceListJson[i].ChannelNum == 1) {
                InfoContent += "<p>油烟浓度：" + DeviceListJson[i].Y1 + "</p>";
                InfoContent += "<p>非甲烷总烃：" + DeviceListJson[i].V1 + "</p>";
                InfoContent += "<p>颗粒物：" + DeviceListJson[i].K1 + "</p>";
            }
            else {
                InfoContent += "通道1：";
                InfoContent += "<p>油烟浓度：" + DeviceListJson[i].Y1 + "</p>";
                InfoContent += "<p>非甲烷总烃：" + DeviceListJson[i].V1 + "</p>";
                InfoContent += "<p>颗粒物：" + DeviceListJson[i].K1 + "</p>";
                InfoContent += "通道2：";
                InfoContent += "<p>油烟浓度：" + DeviceListJson[i].Y2 + "</p>";
                InfoContent += "<p>非甲烷总烃：" + DeviceListJson[i].V2 + "</p>";
                InfoContent += "<p>颗粒物：" + DeviceListJson[i].K2 + "</p>";
            }

            map.addOverlay(marker);              // 将标注添加到地图中
            addClickHandler(InfoContent, DeviceListJson[i].ChannelNum, marker);
            DeviceListArray = [];
        }

    }

    function addClickHandler(InfoContent, ChannelNum, marker) {
        marker.addEventListener("click", function (e) {
            openInfo(InfoContent, ChannelNum,e)
        });
    }

    function openInfo(InfoContent, ChannelNum, e) {
        var p = e.target;
        var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
        var infoWindow;
        if (ChannelNum == 1) {
            infoWindow = new BMap.InfoWindow(InfoContent, opts1);
        }
        else {
            infoWindow = new BMap.InfoWindow(InfoContent, opts2);

        }
        map.openInfoWindow(infoWindow, point);

    }

</script>

@*总体排放图*@
<script type="text/javascript">



    //通道1的图表
    function initCharts() {
        myChart = echarts.init(document.getElementById('main'));
        option = {
            title: {
                text: "最近24小时排放总量",
                textStyle: {//标题内容的样式
                    fontStyle: 'normal',//主标题文字字体风格，默认normal，有italic(斜体),oblique(斜体)
                    fontWeight: "normal",//可选normal(正常)，bold(加粗)，bolder(加粗)，lighter(变细)，100|200|300|400|500...
                    fontFamily: "san-serif",//主题文字字体，默认微软雅黑
                    fontSize: 18,//主题文字字体大小，默认为18px
                    color:'white'
                },
                left: 'center',
                top: '20px',

            },
            legend: {
                bottom: 0,
                orient: 'horizontal'
            },
            tooltip: {},
            dataset: {
                dimensions: ['product', '油烟浓度', '非甲烷总烃', '颗粒物'],
                source: SUMData,
                //source: [
                //    { product: '0', '油烟浓度': 0.5, '颗粒物浓度': 1, '非甲烷': 0.75 },
                //    { product: '1', '油烟浓度': 1, '颗粒物浓度': 0.5, '非甲烷': 0.75 },
                //    { product: '2', '油烟浓度': 0.75, '颗粒物浓度': 1, '非甲烷': 0.5 },
                //]
            },
            xAxis: {
                type: 'category', name: 'h',
                axisLine: {
                    lineStyle: {
                        color: 'white' //更改坐标轴颜色
                    }
                }
            },
            yAxis: {
                name: '(mg/m³)',
                axisLine: {
                    lineStyle: {
                        color: 'white' //更改坐标轴颜色
                    }
                }

            },

            series: [
                { type: 'bar' },
                { type: 'bar' },
                { type: 'bar' }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }

    // 超标设备滚动
    function gundo() {
        $("#bottomList").myScroll({
            speed: 70, //数值越大，速度越慢
            rowHeight: 39 //li的高度
        });
    }


</script>


